<script setup lang="ts">
interface Props {
  todoData: {
    noCheckCount: number;
    noCompleteCount: number;
    shouldCount: number;
  };
}

const props = withDefaults(defineProps<Props>(), {
  todoData: () => ({
    noCheckCount: 0,
    noCompleteCount: 0,
    shouldCount: 0
  })
});
</script>

<template>
  <NCard size="small">
    <template #header>
      <div class="flex items-center text-sm">
        <SvgIcon icon="ant-design:calendar-outlined" class="mr-2 text-orange-600" />
        待办事项
      </div>
    </template>

    <div class="space-y-3">
      <div class="flex items-center justify-between rounded-md bg-red-50 p-2">
        <div class="flex items-center">
          <div class="mr-2 h-2 w-2 rounded-full bg-red-500"></div>
          <span class="text-sm text-gray-700">待盘点</span>
        </div>
        <span class="text-sm text-red-600 font-medium">{{ props.todoData.noCheckCount }}</span>
      </div>

      <div class="flex items-center justify-between rounded-md bg-yellow-50 p-2">
        <div class="flex items-center">
          <div class="mr-2 h-2 w-2 rounded-full bg-yellow-500"></div>
          <span class="text-sm text-gray-700">未完成</span>
        </div>
        <span class="text-sm text-yellow-600 font-medium">{{ props.todoData.noCompleteCount }}</span>
      </div>

      <div class="flex items-center justify-between rounded-md bg-blue-50 p-2">
        <div class="flex items-center">
          <div class="mr-2 h-2 w-2 rounded-full bg-blue-500"></div>
          <span class="text-sm text-gray-700">应盘点</span>
        </div>
        <span class="text-sm text-blue-600 font-medium">{{ props.todoData.shouldCount }}</span>
      </div>
    </div>
  </NCard>
</template>
